<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" v-model="user.name" >
  <input type="text" v-model="user.age" >
</div>

<script src="js/vue.js"></script>
<script>
  var vm =new Vue({
    el:'#app',
    data:{
      user:{
        name: '李四',
        age: 20
      }
    },
    methods:{},
    // 通过侦听器来监听 user 的变化,如果是对象的话，
    //    侦听器来使用 ：对象名：{deep:true,handler:function(){}} 来完成
    watch:{
      // 默认情况下，只能对简单属性生效
      // user: function (newVal,oldVal) {
      //   console.log("根据输入的内容：",newVal,"进行搜索！之前的内容是：",oldVal)
      // }
      // "user.name": function (newVal,oldVal) {
      //   console.log("根据输入的内容：",newVal,"进行搜索！之前的内容是：",oldVal)
      // }
      user:{
        deep:true,
        handler:function (newVal,oldVal) {
          console.log("根据输入的内容：",newVal,"进行搜索！之前的内容是：",oldVal)
        }
      }
    }
  });
</script>
</body>
</html>
